﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
    <style scoped>
        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form name="humanfileForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">
                        您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查看 </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>
            <table width="100%" border="1" cellpadding=3 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td class="TD_STYLE1">
                        档案编号
                    </td class="TD_STYLE2">
                    <td colspan="8">
                        <el-input v-model="ruleForm.humanId" readonly class="INPUT_STYLE2" size="small" />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1" width="11%">
                        I级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        @* <el-form-item prop="FirstKind"> *@
                        <el-input v-model="ruleForm.firstKind.firstKindName" class="INPUT_STYLE2" size="small" readonly />
                        @* </el-form-item> *@
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        II级机构
                    </td>
                    <td width="14%" class="TD_STYLE2">
                        <el-input v-model="ruleForm.secondKind.secondKindName" readonly class="INPUT_STYLE2" size="small"  />
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        III级机构
                    </td>
                    <td class="TD_STYLE2" colspan="2">
                        <el-input v-model="ruleForm.thirdKind.thirdKindName" readonly class="INPUT_STYLE2" size="small"  />
                    </td>
                    <td rowspan="5" style="text-align: center; border: 1px solid; width: 178px; height: 178px;">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 178px; height: 178px;" />
                            @* <el-icon v-else class="avatar-uploader-icon">点击上传相片</el-icon> *@
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        职位分类
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMajorKind.humanMajorKindName" class="INPUT_STYLE2" size="small" readonly />
                    </td>
                    <td class="TD_STYLE1">
                        职位名称
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMajor.humanMajorName" readonly class="INPUT_STYLE2" size="small" />
                    </td>
                    <td class="TD_STYLE1">
                        职称
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanProDesignation" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        姓名
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanName" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        性别
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanSex" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        EMAIL
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanEmail" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        电话
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanTelephone" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        QQ
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanQQ" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        手机
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanMobilephone" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        住址
                    </td>
                    <td colspan="3" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAddress" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        邮编
                    </td>
                    <td colspan="2" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanPostcode" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        国籍
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanNationality" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        出生地
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanBirthplace" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        生日
                    </td>
                    <td width="13%" class="TD_STYLE2">
                        <el-date-picker v-model="ruleForm.humanBirthday"
                            type="date"
                            placeholder="请选择出生日期"
                            :size="size" readonly/>
                    </td>
                    <td width="11%" class="TD_STYLE1">
                        民族
                    </td>
                    <td class="TD_STYLE2" width="14%">
                        <el-input v-model="ruleForm.humanRace" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        宗教信仰
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanReligion" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        政治面貌
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanParty" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        身份证号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanIdCard" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        社会保障号码
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanSocietySecurityId" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        年龄
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAge" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        学历
                    </td>
                    <td class="TD_STYLE2">                     
                        <el-input v-model="ruleForm.humanEducatedDegree" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        教育年限
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanEducatedYears" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        学历专业
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanEducatedMajor" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        薪酬标准
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.salaryStandard.standardName" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        开户行
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanBank" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        帐号
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanAccount" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        复核人
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.checker" class="INPUT_STYLE2" size="small" readonly />
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        复核时间
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.checkTime" readonly class="right-aligned-input" style="width: 100%;"></el-input>
                    </td>
                    <td class="TD_STYLE1">
                        特长
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanSpeciality" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        爱好
                    </td>
                    <td class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanHobby" class="INPUT_STYLE2" size="small" readonly/>
                    </td>
                    <td class="TD_STYLE1">
                        &nbsp;
                    </td>
                    <td class="TD_STYLE2">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        个人履历
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanHistroyRecords"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        家庭关系信息
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.humanFamilyMembership"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        备注
                    </td>
                    <td colspan="7" class="TD_STYLE2">
                        <el-input v-model="ruleForm.remark"
                                  style="width: 100%"
                                  :rows="3"
                                  type="textarea" readonly/>
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</body>
</html>
<script>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, computed, onMounted } = Vue;
    const { ElMessage } = ElementPlus;
    var app = createApp({
        setup() {
            const ruleFormRef = ref(null);
            const ruleForm = reactive({
                hufId:"",//主键
                humanId:"",//档案编号
                firstKind: {},//一级机构，对象获取FirstKindId，FirstKindName
                secondKind: {},//二级机构，对象获取SecondKindId,SecondKindName
                thirdKind: {},//三级机构，对象获取ThirdKindId，ThirdKindName
                humanMajorKind:{},//职位分类，对象获取HumanMajorKindId，HumanMajorKindName
                humanMajor: {},//职位，对象获取HunmaMajorId,HunmaMajorName
                humanName: "",//姓名
                humanAddress:"",//地址
                humanPostcode:"",//邮政编码
                humanProDesignation:"",//职称
                humanTelephone:"",//电话
                humanMobilephone:"",//手机号码
                humanBank:"",//开户银行
                humanAccount:"",//银行账号
                humanQQ:"",//QQ号码
                humanEmail:"",//电子邮箱
                humanHobby:"",//爱好
                humanSpeciality:"",//特长
                humanSex:"",//性别
                humanReligion:"",//宗教信仰
                humanParty:"",//政治面貌
                humanNationality:"",//国籍
                humanRace:"",//民族
                humanBirthday:"",//出生日期/生日
                humanBirthplace:"",//出生地
                humanAge:"",//年龄
                humanEducatedDegree:"",//学历
                humanPicture:"",//相片
                humanEducatedYears:"",//教育年限
                humanEducatedMajor:"",//学习专业
                humanSocietySecurityId:"",//社会保障号码
                humanIdCard:"",//身份证号码
                remark:"",//备注
                salaryStandard:{},//薪酬标准，对象获取SalaryStandardId，SalaryStandardName,SalarySum
                humanHistroyRecords:"",//个人履历
                humanFamilyMembership:"",//家庭关系
                checkTime:"",//复核时间
                checker:"",//复核人
                humanFileStatus:"正常",//档案状态
                checkStatus:"已复核"//复核状态
            })

            function fill2(){
                axios.get("/HF/HFByIDAsync").then(res =>{
                    console.info(res.data)
                    imageUrl.value = res.data.humanPicture
                    ruleForm.firstKind = {
                        firstKindId: res.data.firstKindId,
                        firstKindName: res.data.firstKindName
                    };
                    ruleForm.secondKind = {
                        secondKindId: res.data.secondKindId,
                        secondKindName: res.data.secondKindName
                    };
                    ruleForm.thirdKind = {
                        thirdKindId: res.data.thirdKindId,
                        thirdKindName: res.data.thirdKindName
                    };
                    ruleForm.humanMajorKind = {
                        humanMajorKindId: res.data.humanMajorKindId,
                        humanMajorKindName: res.data.humanMajorKindName
                    };
                    ruleForm.humanMajor = {
                        humanMajorId: res.data.humanMajorId,
                        humanMajorName: res.data.humanMajorName
                    };
                    ruleForm.salaryStandard = {
                        standardId : res.data.salaryStandardId,
                        standardName : res.data.salaryStandardName,
                        salarySum : res.data.salarySum
                    };
                    ruleForm.humanId = res.data.humanId
                    ruleForm.hufId = res.data.hufId
                    ruleForm.checker = res.data.checker
                    ruleForm.checkTime = res.data.checkTime
                    ruleForm.humanProDesignation = res.data.humanProDesignation
                    ruleForm.humanName = res.data.humanName
                    ruleForm.humanSex = res.data.humanSex
                    ruleForm.humanEmail = res.data.humanEmail
                    ruleForm.humanMobilephone = res.data.humanMobilephone
                    ruleForm.humanTelephone = res.data.humanTelephone
                    ruleForm.humanQQ = res.data.humanQQ
                    ruleForm.humanAddress = res.data.humanAddress
                    ruleForm.humanPostcode = res.data.humanPostcode
                    ruleForm.humanNationality = res.data.humanNationality
                    ruleForm.humanBirthplace = res.data.humanBirthplace
                    ruleForm.humanBirthday = res.data.humanBirthday
                    ruleForm.humanRace = res.data.humanRace
                    ruleForm.humanReligion = res.data.humanReligion
                    ruleForm.humanParty = res.data.humanParty
                    ruleForm.humanIdCard = res.data.humanIdCard
                    ruleForm.humanSocietySecurityId = res.data.humanSocietySecurityId
                    ruleForm.humanAge = res.data.humanAge
                    ruleForm.humanEducatedDegree = res.data.humanEducatedDegree
                    ruleForm.humanEducatedYears = res.data.humanEducatedYears
                    ruleForm.humanEducatedMajor = res.data.humanEducatedMajor
                    ruleForm.humanBank = res.data.humanBank
                    ruleForm.humanAccount = res.data.humanAccount
                    ruleForm.humanHobby = res.data.humanHobby
                    ruleForm.humanSpeciality = res.data.humanSpeciality
                    ruleForm.humanHistroyRecords = res.data.humanHistroyRecords
                    ruleForm.humanFamilyMembership = res.data.humanFamilyMembership
                    ruleForm.remark = res.data.remark
                    ruleForm.humanProDesignation = res.data.humanProDesignation
                    ruleForm.humanSex = res.data.humanSex
                }).catch(error =>{
                    console.info(error)
                })
            }
            fill2()
            //上传相片
            const imageUrl = ref('')
            const selectedFile = ref(null);//用来存储图片
            // 上传成功回调
            const handleAvatarSuccess = (response, uploadFile) => {
              imageUrl.value = URL.createObjectURL(uploadFile.raw);
            };

            // 上传前校验
            const beforeAvatarUpload = (rawFile) => {
              if (rawFile.type !== 'image/jpeg') {
                ElMessage.error('Avatar picture must be JPG format!');
                return false;
              } else if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error('Avatar picture size can not exceed 2MB!');
                return false;
              }
              imageUrl.value = URL.createObjectURL(rawFile);//显示预览
              selectedFile.value = rawFile;
              return true;
            };

            function close(){
                window.location.href = "/HF/HFSelect"
            }

            return {
                ruleForm,ruleFormRef,beforeAvatarUpload,handleAvatarSuccess,imageUrl,
                close
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
